import React, { Component } from 'react'
import { TwsReactMarkdownPreview } from 'tws-antd'
import { Button, Checkbox, Col, Divider, Empty, Radio, Row } from 'antd'
import quizType from '../../../../constant/quizType'
import { FormattedMessage } from 'react-intl'
import { connect } from 'react-redux'
import * as taskActions from '../../../../actions/task'
import { withRouter } from 'react-router-dom'
import { convertContent } from '../../../../constant/lang-util'

const RadioGroup = Radio.Group;
class TaskContent extends Component {
  state = {
    showAllMessage: false,
    current: 0,
    id: null
  }

  onClickPackUpContent (taskId){
    this.setState({
      id: taskId,
      showAllMessage: false
    })
  }

  onClickShowAllContent (taskId){
    this.setState({
      id: taskId,
      showAllMessage: true,
    })
  }

  formatType (text) {
    return (quizType.find(obj => obj.type === text) || '').text
  }

  componentWillReceiveProps (nextProps) {
    if (this.props.taskInfo.task.id === nextProps.taskInfo.task.id) {
      return false
    }
    this.setState({
      current : 0
    })
    const {assignments} = nextProps
    const firstAssignmentId = assignments[0] ? assignments[0].id : -1
    this.props.getAssignmentQuizzes(firstAssignmentId)
  }

  prev = () => {
    let {current} = this.state
    current = current - 1
    this.getCurrentAssignmentQuizzes(current)
  }
  next = () => {
    let {current} = this.state
    current = current + 1
    this.getCurrentAssignmentQuizzes(current)

  }
  getCurrentAssignmentQuizzes = current => {
    const {assignments} = this.props
    this.setState({current}, () => {
      this.props.getAssignmentQuizzes(assignments[current].id)
    })
  }

  getAssignmentType = () => {
    const { current} = this.state
    const {assignments} = this.props
    const type = assignments[current] ? assignments[current].type : ''
    return this.formatType(type)
  }

  render () {
    const {showAllMessage, current} = this.state
    const {taskInfo, assignments} = this.props
    const {quizzes, task} = taskInfo
    const taskContent = task.content || ''

    const isFirst = current === 0
    const isLast = current === assignments.length - 1

    return <div key={task.id}>
      <h2 className='margin-t-3 margin-b-2'><FormattedMessage id='任务卡内容'/></h2>
      <div className='mark-down-wrap row-margin'>
        <TwsReactMarkdownPreview
          source={showAllMessage || taskContent.length < 200
            ? taskContent
            : taskContent.slice(0, 200).concat('...')}/>
      </div>
      {
        taskContent.length > 200 && (
        showAllMessage && this.state.id === task.id
          ? <a onClick={this.onClickPackUpContent.bind(this,task.id)}>收起</a>
          : <a onClick={this.onClickShowAllContent.bind(this,task.id)}>点击查看全文</a>)
      }
      <h2 className='margin-t-4'>
        <FormattedMessage id='作业'/>
        { assignments.length>0 ? ` ${current+1}/${assignments.length}` : ''}
      </h2>

      {
        assignments.length > 0
          ? <div>
            <Row>
              <Col span={18}>
                <h4>
                  {convertContent(this.getAssignmentType())} ：{ assignments[current] ? assignments[current].title : ''}
                </h4>
              </Col>
              <Col span={6}>
                <Button type='primary' onClick={this.prev} disabled={isFirst}><FormattedMessage id='上一个作业'/></Button>
                <Divider type='vertical'/>
                <Button type='primary' onClick={this.next} disabled={isLast}><FormattedMessage id='下一个作业'/></Button>
              </Col>
            </Row>
            {
              quizzes.length > 0 ?
                quizzes.map(quiz => {
                  return <div>
                  <div className='mark-down-wrap row-margin' key={quiz.id}>
                    <div className='margin-b-2'>
                      <TwsReactMarkdownPreview source={quiz.description}/>
                    </div>
                    {
                      quiz.choices && quiz.type ==='SINGLE_CHOICE'
                        ? <RadioGroup>
                          {quiz.choices.map((option,index) =>
                          <Radio className='margin-l-2 radio-style'
                                 key={index}
                                 value={index}>
                            {option.choice}
                          </Radio>)}
                        </RadioGroup>
                        : ''
                    }
                    {
                      quiz.choices && quiz.type === 'MULTIPLE_CHOICE'
                      ? quiz.choices.map((option,index) =>
                          <Checkbox className='margin-l-1 radio-style'
                                    key={index}
                                    value={index}>
                            {option.choice}
                          </Checkbox>)
                        : ''
                    }

                  </div>
                      {
                        quiz.templateRepository
                          ? <div style={{fontSize:16}}>
                              <FormattedMessage id='模板库地址' />:
                              <a href={quiz.templateRepository}>{quiz.templateRepository}</a>
                            </div>
                          : ''
                      }
                  </div>
                })
                : <Empty/>
            }

          </div>
          : <Empty/>
      }
    </div>
  }
}

const mapStateToProps = () => ({})
const mapDispatchToProps = dispatch => ({
  getAssignmentQuizzes: (assignmentId) => dispatch(taskActions.getAssignmentQuizzes(assignmentId))

})
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(TaskContent))

